<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>大珠小珠落玉盘</title>
</head>

<body>
  <h1>《大珠小珠落玉盘》</h1>
  <p>红黄蓝珠子散落一地</p>

  <div>
    <button id="sartBtn">开始</button>
    <button id="pauseBtn">暂停</button>
  </div>

  <div>
    <canvas id="gridCanvas" width="400" height="400"></canvas>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', () => {

      const canvas = document.getElementById('gridCanvas');
      const ctx = canvas.getContext('2d');
      // 网格配置
      const config = {
        rows: 9,            // 行数
        cols: 7,            // 列数
        lineWidth: 2,       // 线条宽度
        lineColor: '#000',  // 线条颜色
        fillColor: '#fff',  // 单元格填充色
        hoverColor: '#f0f0f0', // 悬停时的颜色
        selectedColor: '#531cb8', // 选中时的颜色
        showNumbers: true   // 是否显示单元格编号
      };

      // 初始化网格
      function initGrid(width, height,beginPosition) {
        cells = [];

        // 计算每个单元格的宽度和高度
        const cellWidth = width / config.cols;
        const cellHeight = height / config.rows;

        // 创建单元格数据
        for (let row = 0; row < config.rows; row++) {
          for (let col = 0; col < config.cols; col++) {
            cells.push({
              row: row,
              col: col,
              x: col * cellWidth,
              y: row * cellHeight,
              width: cellWidth,
              height: cellHeight,
            });
          }
        }
      }
      function drawGrid() {
        // 清除Canvas
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // 绘制每个单元格
        cells.forEach(cell => {
          // 设置填充颜色（根据是否悬停或选中）
          ctx.fillStyle = config.fillColor;

          // 填充单元格背景
          ctx.fillRect(cell.x, cell.y, cell.width, cell.height);

          // 设置线条样式
          ctx.strokeStyle = config.lineColor;
          ctx.lineWidth = config.lineWidth;

          // 绘制单元格边框
          ctx.strokeRect(cell.x, cell.y, cell.width, cell.height);
        });
      }

      ctx.fillStyle = '#000';
      ctx.beginPath();
      ctx.arc(canvas.width/2, 0, 2, 0, Math.PI * 2);
      ctx.fill();
      // 初始化
      initGrid(canvas.width, canvas.height,beginPath);
      drawBalls
      drawGrid();


      document.getElementById('sartBtn').addEventListener('click', () => {
        // 开始游戏逻辑
        console.log('游戏开始');
      });
      document.getElementById('pauseBtn').addEventListener('click', () => {
        // 暂停游戏逻辑
        console.log('游戏暂停');
      });
    });
  </script>
</body>

</html>